<!--
*Author：jxx
 *Contact：283591387@qq.com
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/system/workbusiness/V_EQU_FAULT_PHENOMENON.js此处编写
 -->
<!-- <template>
    <view-grid ref="grid"
               :columns="columns"
               :detail="detail"
               :editFormFields="editFormFields"
               :editFormOptions="editFormOptions"
               :searchFormFields="searchFormFields"
               :searchFormOptions="searchFormOptions"
               :table="table"
               :extend="extend">
    </view-grid>
</template>
<script>
    import extend from "@/extension/system/workbusiness/V_EQU_FAULT_PHENOMENON.js";
    import { ref, defineComponent } from "vue";
    export default defineComponent({
        setup() {
            const table = ref({
                key: 'Id',
                footer: "Foots",
                cnName: '异常',
                name: 'workbusiness/V_EQU_FAULT_PHENOMENON',
                url: "/V_EQU_FAULT_PHENOMENON/",
                sortName: "CreateOn"
            });
            const editFormFields = ref({});
            const editFormOptions = ref([]);
            const searchFormFields = ref({});
            const searchFormOptions = ref([]);
            const columns = ref([{field:'TaskNo',title:'TaskNo',type:'string',width:110,align:'left',sort:true},
                       {field:'Command',title:'Command',type:'string',width:110,align:'left'},
                       {field:'OperationName',title:'OperationName',type:'string',width:110,align:'left'},
                       {field:'Id',title:'Id',type:'guid',width:110,require:true,align:'left'}]);
            const detail = ref({
                cnName: "#detailCnName",
                table: "#detailTable",
                columns: [],
                sortName: "",
                key: ""
            });
            return {
                table,
                extend,
                editFormFields,
                editFormOptions,
                searchFormFields,
                searchFormOptions,
                columns,
                detail,
            };
        },
    });
</script> -->
<template>
    <div :class="{'is-desktop-bg': value.isShowBg }" class="dog-desktop-panel">
      <div v-if="value.isShowHead" class="desktop-panel-head">
        <div :title="value.name" class="head-title">
          <label>{{ value.name }}</label>
        </div>
      </div>
      <div class="desktop-panel-body">
        <div class="panel-content">
          <el-form label-width="70px" class="form-speech">
            <el-form-item label="播报文本">
              <el-input v-model="state.code" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="语言">
              <el-select v-model="state.lang" @change="syncConfig" placeholder="请选择">
                <el-option v-for="item in langOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="音调">
              <el-slider v-model="state.pitch" @change="syncConfig" :min="0" :max="2" :step="1"></el-slider>
            </el-form-item>
            <el-form-item label="音速">
              <el-slider v-model="state.rate" @change="syncConfig" :min="0.01" :max="10" :step="0.01"></el-slider>
            </el-form-item>
            <el-form-item label="音量">
              <el-slider v-model="state.volume" @change="syncConfig" :min="0" :max="1" :step="0.1"></el-slider>
            </el-form-item>
            <el-form-item>
              <el-button v-if="!speech" type="primary" @click="run">播放</el-button>
              <el-button v-if="speech" type="default" @click="stop">停止</el-button>
              <el-button v-if="speech && isSpeaking" type="default" @click="pause">暂停</el-button>
              <el-button v-if="speech && isPaused" type="default" @click="resume">继续</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="border-foot"></div>
    </div>
  </template>
  
  <script>
    const props = {
    name: '在线语音播报',
    isShowBg: true, // 显示背景
    isShowHead: true // 显示头
  }
  export default {
    props: {
      value: {
        type: Object,
        default() {
          return Object.assign({}, props)
        }
      }
    },
    
    data () {
        return {
        speech: null,
        state: {
          code: '哈哈。',
          lang: '',
          pitch: 1,
          rate: 1,
          volume: 1,
        },
        langOptions: [
          { label: '默认语言', value: '' },
          { label: '中文', value: 'zh' },
          { label: '英文', value: 'en' },
          { label: '法语', value: 'fr' },
          { label: '日语', value: 'ja' },
          { label: '德语', value: 'de' }
        ],
        isSpeaking: false,
        isPaused: false
      }
    },
  
    created() {
      if (this.value.name === undefined) {
        Object.assign(this.value, props)
      }
    },
  
    mounted() {
      this.initView()
    },
  
    methods: {
      // 初始化视图
      initView() {
        let code = localStorage.getItem('speech-text')
        if (code) {
          this.state.code = code
        }
      },
      // 开始播放
      run () {
        if (/^\s*$/.test(this.state.code)) {
          this.$message({
            message: '请输入播放文本',
            type: 'warning'
          })
          return false
        }
        localStorage.setItem('speech-text', this.state.code)
          // 检查浏览器是否支持Web Speech API  
          if ('speechSynthesis' in window) {
            // 清空未播放完的
            speechSynthesis.cancel()
                // 创建一个新的SpeechSynthesisUtterance对象
              let text = this.state.code
              let speech = new SpeechSynthesisUtterance(text)
            this.speech = speech
              this.syncConfig()
            this.bindEvents()
              speechSynthesis.speak(speech) //播放语音
          } else {
          this.$message({
            message: '浏览器不支持语音播报',
            type: 'warning'
          })
            console.error('浏览器不支持Web Speech API');
          }
      },
      // 同步配置
      syncConfig () {
          let speech = this.speech
        if (!speech) {
          return true
        }
        if (this.state.lang) {
          speech.lang = this.state.lang
        }
          speech.pitch = this.state.pitch // 语速
          speech.rate = this.state.rate // 语速
        speech.volume = this.state.volume // 音量
      },
      // 事件绑定
      bindEvents () {
          let speech = this.speech
        if (!speech) {
          return true
        }
        // 开始语音播放时触发
        speech.addEventListener('start', () => {
          this.isSpeaking = true
          this.isPaused = false
        })
        // 暂停语音播放时触发
        speech.addEventListener('pause', () => {
          this.isSpeaking = false
          this.isPaused = true
        })
        // 恢复语音播放时触发
        speech.addEventListener('resume', () => {
          this.isSpeaking = true
          this.isPaused = false
        })
        // 语音播放结束时触发
        speech.addEventListener('end', () => {
          this.speech = null
          this.isSpeaking = false
          this.isPaused = false
        })
        // 语音播放错误时触发
        speech.addEventListener('error', () => {
          this.speech = null
          this.isSpeaking = false
          this.isPaused = false
        })
      },
      // 停止播放
      stop () {
          let speech = this.speech
        if (!speech) {
          return true
        }
        speechSynthesis.cancel()
        this.speech = null
      },
      // 暂停播放
      pause () {
          let speech = this.speech
        if (!speech) {
          return true
        }
        speechSynthesis.pause()
        this.isSpeaking = false
        this.isPaused = true
      },
      // 继续播放
      resume () {
          let speech = this.speech
        if (!speech) {
          return true
        }
        speechSynthesis.resume()
        this.isSpeaking = true
        this.isPaused = false
      }
    }
  }
  </script>
  
  <style scoped>
    .dog-desktop-panel {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }
  
    .dog-desktop-panel .desktop-panel-head {
      padding: 0 16px;
      width: 100%;
    }
  
    .desktop-panel-head .head-title {
      height: 40px;
      font-size: 14px;
      color: #333;
      text-align: center;
      line-height: 40px;
      border-bottom: 1px solid #e0e0e0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  
    .dog-desktop-panel .desktop-panel-body {
      height: 100%;
    }
  
    .desktop-panel-head+.desktop-panel-body {
      height: calc(100% - 40px);
    }
  
    .dog-desktop-panel.is-desktop-bg {
      background: #fff;
    }
  
    .desktop-panel-body .panel-content {
      overflow: hidden;
      padding: 8px 16px;
      color: #666;
    }
  
    .form-speech .el-select {
      display: block;
    }
  </style>